<template>
  <div class="login-wrap">

    <div class="title-box">
      <div class="title-con" @click="toResist">
        <span class="title" :class="{'select-active':showPage == 1}">登录</span>
      </div>
      <div class="title-con" @click="toLogin">
        <span class="title" :class="{'select-active':showPage == 2}">注册</span>
      </div>
    </div>

    <div class="login-box" v-if="showPage == 1">
      <div class="content-box">
        <div class="content-con">
          <span class="panel">手机号：</span>
          <div class="input-box">
            <input class="con" type="tel" maxlength="11" @blur="inputBlur" v-model="loginPhone"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">登录密码：</span>
          <div class="input-box">
            <input class="con" type="password" maxlength="16" @blur="inputBlur" v-model="loginPwd"/>
          </div>
        </div>
      </div>

      <div class="forget-box" @click="forgetPage">忘记密码？</div>

      <div class="btn-box">
        <button type="button" class="btn" @click="login">登&nbsp;录</button>
      </div>
    </div>

    <div class="login-box" v-if="showPage == 2">
      <div class="content-box">
        <div class="content-con">
          <span class="panel">手机号：</span>
          <div class="input-box">
            <input class="con" type="tel" maxlength="11" @blur="inputBlur" v-model="registerPhone"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">设置登录密码：</span>
          <div class="input-box">
            <input class="con" type="password" maxlength="16" @blur="inputBlur" v-model="registerPwd1"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">请再次输入密码：</span>
          <div class="input-box">
            <input class="con" type="password" maxlength="16" @blur="inputBlur" v-model="registerPwd2"/>
          </div>
        </div>

        <div class="content-con">
          <span class="panel">验证码：</span>
          <div class="code-con">
            <div class="code-box">
              <input class="code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" @blur="inputBlur"
                     v-model="code"/>
            </div>
            <timer-btn ref="timerBtn" class="mobile" v-on:run="sendCode"></timer-btn>
          </div>
        </div>
      </div>

      <div class="btn-box" @click="register">
        <button type="button" class="btn">注&nbsp;册</button>
      </div>
    </div>

  </div>
</template>

<script>
  import code from "../../components/code"
  import {checkPhone, checkPwd, checkCode} from "../../config/verify"
  import {login, getToken, sendCode, mateCode, registerUser} from '../../axios/api'
  import md5 from 'js-md5'
  import {getSessionStore, setSessionStore} from "../../config/util"

  export default {
    data() {
      return {
        title: "",
        showPage: 1,
        loginPhone: "",
        loginPwd: "",
        registerPhone: "",
        registerPwd1: "",
        registerPwd2: "",
        code: "",
        workId: "",
        token1: "",
        token2: ""
      };
    },
    mounted() {
      this.workId = this.$route.query.id;//招工详情id
    },
    methods: {
      inputBlur() {
        window.scrollTo(0, 0);
      },
      toResist() {
        this.showPage = 1;
      },
      toLogin() {
        this.showPage = 2;
      },
      affirmPwd() {
        let pwd1 = this.registerPwd1;
        let pwd2 = this.registerPwd2;
        if (pwd1 != pwd2) {
          this.$vux.toast.text("两次密码不一致", "middle");
          return;
        }
        return true;
      },
      sendCode() {//获取验证码
        let phone = this.registerPhone;
        let pwd1 = this.registerPwd1;
        if (checkPhone(phone) && checkPwd(pwd1, 2) && this.affirmPwd()) {
          let param1 = {
            "phone": phone,
            "i": 0
          };
          getToken(param1).then((res) => {//获取token
            this.token1 = res.data;

            let param2 = {
              "phone": phone,
              "i": 0,
              "userToken": this.token1
            };
            sendCode(param2).then((res) => {//发送验证码
              if (res.code == 0) {
                this.token2 = res.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              }
            });
          });
        }
      },
      register() {//注册
        let phone = this.registerPhone;
        let pwd = this.registerPwd1;
        let code = this.code;
        if (checkPhone(phone) && checkPwd(pwd, 2) && checkCode(code)) {
          let param1 = {
            "phone": phone,
            "i": 0,
            "code": code,
            "token": this.token2
          };
          mateCode(param1).then((res) => {//校验验证码
            if (res.code == 0) {
              this.$vux.loading.show({
                text: '加载中',
              });
              let param2 = {
                "phone": phone,
                "password": md5(pwd),
                "type": 0
              };

              registerUser(param2).then((res) => {//注册
                this.$vux.loading.hide();
                if (res.code == 0 && res.data == 0) {
                  this.showPage = 2;
                } else {
                  this.showPage = 1;
                }
              });
            }
          });
        }
      },
      forgetPage() {//忘记密码
        this.$router.push("/forget");
      },
      login() {//登录
        let phone = this.loginPhone;
        let pwd = this.loginPwd;
        if (checkPhone(phone) && checkPwd(pwd, 1)) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let data = {"phone": phone, "password": md5(pwd), "type": 0};

          login(data).then(res => {
            console.log(JSON.stringify(res))
            this.$vux.loading.hide();

            if (res.data == "null") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else if (res.data == "error") {
              this.$vux.toast.text("用户名或密码错误", "middle");
              return;
            } else {
              let userCookie = document.cookie;
              let base64 = require('js-base64').Base64;
              setSessionStore("userCookie", userCookie);
              setSessionStore("identity", base64.encode(res.data));
              setSessionStore("work_sign", 1);//分享链接-进招工详情标识

              if (getSessionStore("workdetail_sign") == "20001") {
                this.$router.push({path: '/workdetail', query: {id: this.workId}});
              } else {
                this.$router.replace('/index');
              }
            }
          });
        }
      }
    },
    components: {
      "timer-btn": code
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assest/mixin";

  .login-wrap {
    .wh(100%, 100%);
    overflow: hidden;
    .title-box {
      .fj(center, center);
      margin: 0.267rem auto 0.8rem;
      .wh(9.2rem, 1.2rem);
      border-bottom: @talent-border-bottom;
      .size-color(0.427rem, rgba(153, 153, 153, 1));
      .title-con {
        .fj(center, center);
        .wh(1.6rem, 100%);
        flex: 1;
        .title {
          .fj(center, center);
          .wh(1.6rem, 100%);
        }
        .select-active {
          .size-color-weight(0.48rem, rgba(255, 145, 38, 1), 500);
          border-bottom: 0.08rem solid rgba(255, 143, 51, 1);
        }
      }
    }
    .content-box {
      margin: 0.8rem auto 0.48rem;
      .wh(9.2rem, auto);
      .content-con {
        display: flex;
        flex-direction: column;
        margin-bottom: 0.48rem;
        &:last-child {
          margin-bottom: 1.6rem;
        }
        .panel {
          padding-bottom: 0.267rem;
          .size-color-weight(0.4rem, rgba(153, 153, 153, 1), 500);
        }
        .input-box {
          display: flex;
          align-items: center;
          .wh(9.2rem, 1.173rem);
          background: rgba(240, 243, 245, 1);
          .border-radius(0.107rem);
          .con {
            padding-left: 0.467rem;
            .wh(90%, 0.6rem);
            line-height: 0.6rem;
            background: rgba(240, 243, 245, 1);
            .size-color(0.48rem, rgba(51, 51, 51, 1));
          }
        }
        .code-con {
          .fj(space-between, center);
          .wh(100%, 1.173rem);
          .code-box {
            display: flex;
            align-items: center;
            .wh(5.707rem, 1.173rem);
            background: rgba(240, 243, 245, 1);
            .border-radius(0.107rem);
            .code {
              padding-left: 0.467rem;
              .wh(90%, 0.6rem);
              line-height: 0.6rem;
              background: rgba(240, 243, 245, 1);
              .size-color(0.48rem, rgba(51, 51, 51, 1));
            }
          }
          .mobile {
            margin-left: auto;
            .wh(3.2rem, 1.173rem);
            border: 0.027rem solid rgba(255, 143, 51, 1);
            .border-radius(0.107rem);
            .size-color-weight(0.4rem, rgba(255, 143, 51, 1), 500);
            background: @talent-bg-color;
          }
        }

      }
    }
    .forget-box {
      text-align: right;
      margin-right: 0.2rem;
      margin-bottom: 1.6rem;
      .size-color-weight(0.4rem, rgba(255, 143, 51, 1), 500);
    }

    .btn-box {
      margin: 0 auto;
      .wh(7.2rem, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }
</style>
